<template>
  <!-- 在app.vue外部包裹div ，是为了为主题切换提供后续的操作功能 -->
  <div :class="{ dark: isDark }">
    <!-- vue环境下，标签定义ref属性，在vue解析时，该标签的DOM元素会被记录在this.$refs中 -->
    <input
      ref="btn"
      type="button"
      value="主题切换"
      @click="changeTheme($event)"
    />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDark: false,
    };
  },
  methods: {
    changeTheme(e) {
      // console.log(this.$refs);
      this.isDark = !this.isDark;
    },
  },
};
</script>

<style lang="scss" scoped>
.dark {
  height: 100vh;
  width: 100vw;
  color: #e5eaf3;
  background-color: #141414;
}
</style>
